<template>
    <div class="wrapper">
        <div class="titel-row">
            <div class="home-icon">
                <img src="../../assets/inquiryRegister/home.png" alt>
            </div>
            <div class="title">知识库</div>
        </div>
        <div class="zz-content">
            <div class="item1">
                <div class="input-row">
                    <input v-model="keyword" placeholder="请输入关键字..." type="text">
                    <div class="search-btn-row">
                        <button @click="reset('keyword')" class="reset-btn">重置</button>
                        <button @click="search" class="search-btn">
                            <img src="../../assets/search.png" alt="">
                        </button>
                    </div>
                </div>
                <div class="wh-row">
                    <div class="flex item-center">
                        <img src="../../assets/knowledgeLib/wh.png" alt="">
                        <span>知识类型</span>
                    </div>
                    <button @click="onAddType('')">新增</button>
                </div>
                <div class="tree-content">
                    <el-tree :current-node-key="currentKey" :render-content="renderContent" ref="tree" node-key="id" :expand-on-click-node="false" :highlight-current="true" :default-expand-all="true" :data="treeData" :props="defaultTreeProps" @node-click="handleNodeClick"></el-tree>

                </div>

                <!-- <div class="outer-wrapper">
                    <div v-if="!cardTypeList.length" class="no-data">
                        <img src="../../assets/no-data.png" alt="">
                    </div>
                </div> -->
            </div>
            <div class="item2">
                <div class="list-header">
                    <div class="list-header-wrapper">
                        <span class="list-header-title">
                            <span>{{currentTitle}}</span>
                        </span>

                    </div>
                    <div class="list-search-input">
                        <div class="input-row">
                            <input v-model="listKeywords" placeholder="请输入关键词..." type="text">
                            <div class="search-btn-row">
                                <button @click="reset('listKeywords')" class="reset-btn">重置</button>
                                <button @click="onSearchList" class="search-btn">
                                    <img src="../../assets/search.png" alt="">
                                </button>
                            </div>
                        </div>
                        <div class="handle-row">
                            <button v-on:click="openModal(item.type,{isCreate:true,item})" class="handle-btn" v-bind:class="[item.color]" v-for="(item,index) in buttonConfig" :disabled="(item.type=='delete' ||item.type=='dispatch' || item.type == 'cancel')&&(multipleSelection&&multipleSelection.length==0)" :key="index">
                                <img :src="item.icon" alt>
                                <span>{{item.name}}</span>
                            </button>
                        </div>
                    </div>
                </div>
                <ul class="zz-list-ul">
                    <el-table v-on:cell-click="onClickRow" :row-class-name="tableRowClassName" stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" row-key="id">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column v-for="(item,index) in thConfig" :formatter="item.formatter" :key="index" v-bind:prop="item.prop" v-bind:label="item.label"></el-table-column>
                        <el-table-column label="操作" width="180">
                            <template slot-scope="scope">
                                <!-- <el-tooltip content="查看" placement="top">
                                    <el-button v-on:click.stop.prevent="onDetail(scope.row)" icon="el-icon-search" size="small" circle />
                                </el-tooltip> -->
                                <el-tooltip  content="编辑" placement="top">
                                    <el-button  v-if = "scope.row.isPublish == 0" v-on:click.stop.prevent="onEditContent(scope.row)" type="primary" icon="el-icon-edit-outline" size="small" circle />
                                </el-tooltip>
                                <el-tooltip content="删除" placement="top">
                                    <Popover title="确定删除吗？" @onConfirm="deleteHandler(scope.row)">
                                        <el-button  v-if = "scope.row.isPublish == 0" v-on:click.stop.prevent="onDelete" style="margin-left: 10px" type="danger" icon="el-icon-delete" size="small" circle />
                                    </Popover>
                                </el-tooltip>
                                <!-- <el-tooltip content="驳回" placement="top">
                                    <el-button style="margin-left: 10px" v-on:click.stop.prevent="rejectHandler(scope.row)" size="small" circle>
                                        <img style="width:12px" src="../../assets/inquiryRegister/reject.png">
                                    </el-button>
                                </el-tooltip> -->
                            </template>
                        </el-table-column>
                    </el-table>
                </ul>
                <div class="pager">
                    <el-pagination background @current-change="handleCurrentChange" :current-page="listRequest.pageNum" :page-size="8" prev-text="上一页" next-text="下一页" layout="total, prev, pager, next" :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <AddTypeDialog v-on:onSubmit="onSubmit" />
        <AddKnowledgeDialog v-on:onSubmit="onKnowledgeSubmit" />
    </div>
</template>

<script>
import Pubsub from "../../utils/pubsub";
import AddTypeDialog from "../../components/knowledgeLib/addTypeDialog";
import AddKnowledgeDialog from "../../components/knowledgeLib/addKnowledgeDialog";
import { getTimeStr } from "../../utils";
import { Popover } from "../../components/common"; //小弹窗

import {
    getKnowledgeLibTree,
    deleteKnowledgeLibTree,
    addKnowledgeLibTree,
    editKnowledgeLibTree,
    getKnowledgeLibList,
    addKnowledgeLib,
    publishKnowledgelib,
    deleteKnowledgelib,
    editKnowledgeLib
} from "../../config/api.js";

const addIcon = require("../../assets/inquiryRegister/add.png");
const deleteIcon = require("../../assets/inquiryRegister/delete.png");
const rejectIcon = require("../../assets/inquiryRegister/reject.png");
const publishIcon = require("../../assets/knowledgeLib/publish.png");
export default {
    components: {
        AddTypeDialog,
        AddKnowledgeDialog,
        Popover
    },
    data() {
        return {
            keyword: "",
            listKeywords: "", //列表关键字
            currentTitle: "", //当选选中项
            currentKey: "", //类型树当前选中的key
            list: [], //列表数据源
            tableData: [], //咨询数据列表
            total: 0, //证件库总条数
            multipleSelection: [], //选中项
            listRequest: {
                pageNum: 1,
                pageSize: 8,
                knowledgeId: "",
                keyword: ""
            },
            getTimeStr,
            treeData: [],
            defaultTreeProps: {
                children: "children",
                label: "name",
                parentId: "parentId",
                id: "id"
            },
            buttonConfig: [
                {
                    name: "新增",
                    icon: addIcon,
                    type: "showAddKnowledgeDialog",
                    color: "main"
                },
                {
                    name: "发布",
                    icon: publishIcon,
                    type: "dispatch",
                    color: "green"
                },
                // {name:"修改",icon:editIcon,type:"edit",color:"green"},
                // {
                //     name: "删除",
                //     icon: deleteIcon,
                //     type: "delete",
                //     color: "default"
                // },
                {
                    name: "撤回",
                    icon: rejectIcon,
                    type: "cancel",
                    color: "default"
                }
            ],
            thConfig: [
                // { prop: "ems", label: "快递编码" },
                { prop: "title", label: "标题" },
                { prop: "content", label: "回复" },
                { prop: "createPersonName", label: "创建人" },
                {
                    prop: "createTime",
                    label: "创建时间",
                    formatter: function(row, column) {
                        return getTimeStr(row.createTime);
                    }
                },
                {
                    prop: "isPublish",
                    label: "状态",
                    formatter: function(row) {
                        if (row.isPublish === "0") {
                            return (
                                <span style={{ color: "#d40000" }}>未发布</span>
                            );
                        } else {
                            return <span>已发布</span>;
                        }
                    }
                }
            ], //table头部配置
            renderContent: (h, { node, data }) => {
                let children = data.children || [];
                return (
                    <span style="display:flex;justify-content:space-between;align-items:center;width:100%;">
                        <span class="el-tree-node__label">{node.label}</span>
                        <span style="display:flex">
                            {data.parentId == 0 && (
                                <i
                                    on-click={() => this.onAddType(data.id)}
                                    class="tree-handle-icon el-icon-circle-plus"
                                />
                            )}
                            <i
                                on-click={() => this.onEditType(data)}
                                class="tree-handle-icon el-icon-edit"
                            />
                            <el-tooltip content="删除" placement="top">
                                <Popover
                                    title="确定删除吗？"
                                    on-onConfirm={() => this.onDeleteType(data)}
                                >
                                    <i
                                        // on-click={() => this.onEditType(data)}
                                        class="tree-handle-icon el-icon-delete"
                                    />
                                </Popover>
                            </el-tooltip>
                        </span>
                    </span>
                );
            }
        };
    },
    created() {
        this.getTree();
    },
    methods: {
        /**
         * 新增等操作
         */
        openModal(type) {
            if (type == "dispatch") {
                this.$confirm("请确认发布选中内容", "提示", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.publish(1);
                });
                return;
            } else if (type == "cancel") {
                this.$confirm("请确认撤回选中内容", "提示", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.publish(0);
                });
                return;
            } else if (type == "delete") {
                this.$confirm("请确认删除选中内容", "提示", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.deleteContent();
                });
                return;
            }
            this.handleKnowlegdeType = "add";
            Pubsub.publish(type);
        },
        onEditContent(item) {
            this.handleKnowlegdeType = "edit";
            Pubsub.publish("showAddKnowledgeDialog", item);
        },
        /**
         * 删除
         */
        deleteContent() {
            deleteKnowledgelib({ ids: this.multipleSelection }).then(
                (result = {}) => {
                    this.$message({
                        message: "操作成功",
                        type: "success"
                    });
                    this.getDetailList();
                }
            );
        },
        /**
         * 发布/撤回
         */
        publish(type) {
            publishKnowledgelib({ ids: this.multipleSelection, type }).then(
                (result = {}) => {
                    this.$message({
                        message: "操作成功",
                        type: "success"
                    });
                    this.getDetailList();
                }
            );
        },
        /**
         * 获取知识库类型树
         */
        getTree() {
            let request = {
                keyword: this.keyword
            };
            getKnowledgeLibTree(request).then((result = {}) => {
                let data = result.data || [];
                this.treeData = data;

                setTimeout(() => {
                    let id = "";
                    if (data.length && !this.currentTitle) {
                        this.currentTitle = data[0].name;
                        this.currentKey = data[0].id;
                        id = data[0].id;
                    } else {
                        id = this.currentKey;
                    }
                    this.getDetailList(id);
                    this.$refs.tree.setCurrentKey(id);
                }, 0);
            });
        },
        /**
         * 获取详情列表
         */
        getDetailList(id) {
            this.listRequest.knowledgeId = id || this.currentKey;
            getKnowledgeLibList(this.listRequest).then(result => {
                let rows = result.rows || [];
                this.tableData = rows;
                this.total = result.total || 0;
            });
        },
        /**
         * 新增
         */
        onAddType(parentId = "") {
            this.handleType = "add";
            this.parentId = parentId;
            Pubsub.publish("showAddKnowledgeTypeDialog", {
                currentTitle: this.currentTitle
            });
        },
        /**
         * 维护，编辑知识类型
         */
        onSubmit(values) {
            let request = Object.assign(values);
            if (this.handleType === "add") {
                //新增
                request.parentId = this.parentId;
                addKnowledgeLibTree(request).then(() => {
                    this.$message({
                        message: "新增成功",
                        type: "success"
                    });
                    this.getTree();
                    Pubsub.publish("hideAddKnowledgeTypeDialog");
                });
            } else {
                request.id = this.currentKey;
                request.parentId = undefined;
                editKnowledgeLibTree(request).then(() => {
                    this.$message({
                        message: "编辑成功",
                        type: "success"
                    });
                    this.getTree();
                    Pubsub.publish("hideAddKnowledgeTypeDialog");
                });
            }
        },
        /**
         * 新增/编辑知识库submit
         */
        onKnowledgeSubmit(values) {
            if (this.handleKnowlegdeType == "add") {
                values.knowledgeId = this.currentKey;
                addKnowledgeLib(values).then((result = {}) => {
                    this.$message({
                        message: "新增成功",
                        type: "success"
                    });
                    this.getDetailList(this.currentKey);
                    Pubsub.publish("hideAddKnowledgeDialog");
                });
            } else {
                console.log(values);
                let { id, title, keyword, content } = values;
                let request = { id, title, keyword, content };
                editKnowledgeLib(request).then((result = {}) => {
                    this.$message({
                        message: "编辑成功",
                        type: "success"
                    });
                    this.getDetailList(this.currentKey);
                    Pubsub.publish("hideAddKnowledgeDialog");
                });
            }
        },
        /**
         * 通用重置
         */
        reset(type) {
            this[type] = "";
            if (type == "keyword") {
                this.getTree();
            } else {
                this.listRequest.keyword = "";
                this.listRequest.pageNum = 1;
                this.getDetailList();
            }
        },
        /**
         * 证件类型搜索
         */
        search() {
            this.getTree();
        },
        /**
         * 搜索列表
         */
        onSearchList() {
            this.listRequest.keyword = this.listKeywords;
            this.listRequest.pageNum = 1;
            this.getDetailList();
        },
        /**
         * 分页
         */
        handleCurrentChange(pageNum) {
            this.listRequest.pageNum = pageNum;
            this.getDetailList();
        },
        /**
         * 点击树事件
         */
        handleNodeClick(e, node) {
            let { name, id, parentId } = node.data;
            this.currentKey = id;
            this.currentTitle = name;
            this.listRequest.keyword = "";
            this.listKeywords = "";
            this.getDetailList(id);
        },
        /**
         * 设置table某一项class
         */
        tableRowClassName({ row, rowIndex }) {
            if (row.isPublish == "0") {
                return "warning-row";
            }
            if (rowIndex % 2 === 0) {
                return "even-row";
            } else {
                return "odd-row";
            }
        },
        /**
         * 设置选中项
         */
        handleSelectionChange(e = []) {
            if (e.length) {
                e.map(item => {
                    this.multipleSelection.push(item.id);
                });
            } else {
                this.multipleSelection = [];
            }
        },
        /**
         * 点击table row
         */
        onClickRow(row) {
            this.$refs.multipleTable.toggleRowSelection(row);
        },
        /**
         * 编辑知识库类型
         */
        onEditType(data) {
            this.handleType = "edit";
            Pubsub.publish("showAddKnowledgeTypeDialog", {
                currentTitle: this.currentTitle,
                name: data.name
            });
        },
        /**
         * 删除知识库类型
         */
        onDeleteType(data) {
            deleteKnowledgeLibTree({ id: data.id }).then(() => {
                this.$message({
                    message: "删除成功",
                    type: "success"
                });
                this.currentTitle = "";
                this.currentCurrent = "";
                this.getTree();
            });
        }
    }
};
</script>

<style lang = "scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";

.wrapper {
    margin: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    flex: 1;
    /* overflow:auto; */

    height: 100%;
}
.titel-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    .home-icon {
        height: 50px;
        width: 50px;
        background: #1a36a9;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .title {
        font-size: 22px;
        color: #272c67;
    }
}
.zz-content {
    display: flex;
    flex: 1;
    /* height: 100%; */
    overflow: auto;
    /* padding-bottom: 100px; */
    background: #fff;
    .item1 {
        width: 410px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 20px 0;
        border-right: 1px solid #e5e5e5;
        /* height: 100%; */
        .outer-wrapper {
            /* height: 100%; */
            overflow: auto;
        }
    }
    .item2 {
        flex: 1;
        padding: 0 20px 30px 20px;
        display: flex;
        flex-direction: column;
    }
}
.pager {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}
.input-row {
    /* flex: 1; */
    display: flex;
    position: relative;
    padding: 0 25px;
    margin-bottom: 10px;
    input {
        flex: 1;
        font-size: 16px;
        padding-left: 20px;
        padding-right: 105px;
        height: 36px;
    }
    .search-btn-row {
        position: absolute;
        display: flex;
        align-items: center;
        right: 25px;
    }
    .reset-btn {
        color: #c13530;
        padding: 0 20px;
        opacity: 0.8;
    }
    .search-btn {
        background: #822424;
        height: 42px;
        padding: 0 12px;
        img {
            height: 25px;
            width: 25px;
        }
        &:active {
            opacity: 0.8;
        }
    }
}
.list-header {
    &-wrapper {
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
    }
    &-title {
        padding: 0 15px;
        position: relative;
        font-size: 16px;
        &:after {
            position: absolute;
            display: block;
            content: "";
            width: 100%;
            height: 2px;
            background: #1a36a9;
            left: 0;
            bottom: -16px;
        }
    }
}
.wh-row {
    display: flex;
    background: #e7ecff;
    padding: 8px 25px;
    justify-content: space-between;
    color: #1a36a9;
    margin-top: 10px;
    margin-bottom: 25px;
    span {
        font-size: 16px;
    }
    img {
        margin-right: 15px;
    }
    button {
        height: 30px;
        width: 60px;
        color: #fff;
        background: #1a36a9;
        border-radius: 5px;
        &:disabled {
            background: #d2d2d2;
            color: #666;
        }
    }
}
.list-search-input {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .input-row {
        width: 400px;
        margin-bottom: 0;
        padding: 0;
    }
    .search-btn-row {
        right: 0;
    }
}
.tree-content {
    flex: 1;
    overflow: auto;
    padding: 0 25px;
}
.handle-row {
    display: flex;
    justify-content: flex-end;
}
.handle-btn {
    width: 76px;
    height: 30px;
    border-radius: 3px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
        margin-right: 10px;
    }
    &:last-child {
        margin-right: 0;
    }
    &:active {
        opacity: 0.8;
    }
    &.main {
        background: #1a36a9;
        color: #fff;
    }
    &.green {
        background: #007130;
        color: #fff;
    }
    &.default {
        background: #e5e5e5;
    }
    &:disabled {
        background: #999;
        opacity: 1;
    }
}
.custom-tree-node {
    display: flex;
    justify-content: space-between;
}
.zz-list-ul{
    height: 100%;
    overflow: auto;
}
</style>
<style>
.el-tree-node__expand-icon {
    color: #000 !important;
    font-size: 14px;
}
/* .is-current .el-tree-node__expand-icon:nth-child(1){
    color:#1a36a9 !important;
}
.is-current .el-tree-node__label:nth-child(1){
    color:#1a36a9 !important;
} */
/* .is-current .el-tree-node__content:nth-child(1){
    background: #e7ecff !important;
} */
.el-tree-node__expand-icon.is-leaf:before {
    content: "\2022";
}
.el-tree-node__expand-icon + span {
    /* font-size: 20px; */
    font-weight: bold;
}
.el-tree-node__expand-icon.is-leaf + span {
    /* font-size: 20px; */
    font-weight: 400;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background: #e7ecff !important;
}
.el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content
    > .el-tree-node__expand-icon {
    color: #1a36a9 !important;
}
.el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content
    .el-tree-node__label {
    color: #1a36a9 !important;
}
.el-tree-node__label {
    font-size: 14px;
    color: #333;
}

.el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content
    .tree-handle-icon {
    display: block;
}
.tree-handle-icon {
    font-size: 16px;
    margin-right: 10px;
    display: none;
}
</style>

